<template>
  <div>
    <MesBox
      v-model="visible"
      :lazy="true"
      title="新建"
      :height="600"
      width="80%"
      :padding="15"
      :onModelClose="onModelClose"
    >
      <MesHeader icon="el-icon-s-grid" title="其他请购单">
        <template #default>
          <el-button size="small" link class="textColor" @click="addRow"
            ><i class="el-icon-plus" style="margin-right: 5px"></i
            >添加行</el-button
          >
          <el-button size="small" link class="textColor" @click="delRow"
            ><i class="el-icon-delete" style="margin-right: 5px"></i
            >删除行</el-button
          >
        </template>
      </MesHeader>
      <MesTable
        ref="tableRef"
        index
        :tableData="tableData"
        :columns="columns"
      ></MesTable>
      <template #footer>
        <el-button type="primary" @click="save">
          <i class="el-icon-check"></i>
          保存
        </el-button>
      </template>
    </MesBox>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import MesBox from '@/components/basic/MesBox.vue'
import MesTable from '@/components/basic/MesTable.vue'
import MesHeader from '@/components/basic/MesHeader.vue'

const emit = defineEmits(['parentCall'])
const tableRef = ref(null)
const that = getCurrentInstance().appContext.app.config.globalProperties
let visible = ref(false)
let products = []
let tableData = ref([])
const columns = ref([
  {
    title: '编码',
    field: 'InvCode',
    required: true,
    edit: {
      type: 'select',
    },
    bind: {
      data: [],
    },
    onChange: (row, value) => {
      products.value.some((item) => {
        if (item.ProductCode == row.InvCode) {
          row.InvName = item.ProductName
          row.InvStandard = item.ProductStandard
          return true
        }
      })
    },
  },
  {
    title: '名称',
    field: 'InvName',
    disable: true,
  },
  {
    title: '规格',
    field: 'InvStandard',
    disable: true,
  },
  {
    title: '采购数量',
    field: 'Qty',
    required: true,
    edit: {
      type: 'number',
    },
  },
  {
    title: '备注',
    field: 'Remark',
    edit: {
      type: 'textarea',
    },
  },
])

const open = () => {
  visible.value = true
}

const addRow = () => {
  tableData.value.push({})
}

const delRow = () => {
  tableRef.value.delRow()
}

const getProduct = async () => {
  let res = await that.http.get(
    '/api/Base_BomDetailTest/GetProductMatrail',
    null,
    true
  )
  res = res.filter((item) => item.DicName == '劳保')
  // console.log(res);
  columns.value.some((item) => {
    if (item.field == 'InvCode') {
      products.value = res
      item.bind.data = res.map((element) => {
        return {
          key: element.ProductCode,
          value: element.ProductCode,
        }
      })
      return true
    }
  })
}

const save = async () => {
  if (tableData.value.length) {
    // console.log(tableData.value);
    let flag = true
    tableData.value.some((item) => {
      if (!item.InvCode || !item.Qty) {
        that.$message.error('请填写完整信息')
        flag = false
        return true
      }

      if (Number(item.Qty) !== Number(item.Qty)) {
        that.$message.error('数量请填写数字')
        flag = false
        return true
      }
    })

    if (flag) {
      const params = {
        chilidren: tableData.value.map((item) => {
          return {
            ...item,
            orgQty: item.Qty,
            invCode: item.InvCode,
            qty: item.Qty,
            remark: item.Remark,
          }
        }),
      }
      const res = await that.http.post(
        '/api/Production_AtherLackStock/CreateAtherLackStock',
        params,
        true
      )
      if (res.status) {
        that.$message.success('新建成功')
        visible.value = false
        tableData.value = []
        emit('parentCall', ($parent) => {
          $parent.search()
        })
      } else {
        that.$message.error(res.message)
      }
    }
  }
}

const onModelClose = () => {
  tableData.value = []
}

getProduct()
defineExpose({
  open,
})
</script>
<style scoped></style>
